
function drawBars(dataStr, pos, w, h) {
  var margin = {top: 0, right: 20, bottom: 60, left: 40},
      width = w - margin.left - margin.right,
      height = h - margin.top - margin.bottom;

  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);

  var y = d3.scale.linear()
      .range([height, 0]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(function(d) { return d/10000+"w"; });

  var svg = d3.select(pos).append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  

  d3.tsv(dataStr, type, function(error, data) {
      x.domain(data.map(function(d) { return d.areaName; }));
      y.domain([0, d3.max(data, function(d) { return +d.totalPrice; })]);
      if ( data.length == 0 )  {
    	  d3.select("#chart-2")
  		.append("p")
  			.attr("id", "nodata2")
  			.style({"position":"relative", "top":"-150px", "left": "40%","font-size":"25px", "font-weight":"bold"})
  			.html("对不起，暂无数据！");
  		  return; 
      }

  svg.append("g")
      .attr("class", "x axis sc")
      .attr("transform", "translate(0," + (height+10) + ")")
      .call(xAxis);
  d3.selectAll(".sc text").attr("y", "0").attr("x", "-15");


  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.areaName); })
      .attr("width", x.rangeBand())
      .attr("count",function(d) {return d.totalPrice;})
      .attr("y", function(d) { return y(d.totalPrice); })
      .attr("height", function(d) { return height - y(d.totalPrice); });
  

	  $(".bar").mousemove(function(e){
	  	
	  	var Y = e.pageY-40+10;
			var X = e.pageX-$(".content").width()*0.1+50;
			//alert(X+" "+Y);
			document.getElementById("p-nameid-2").innerHTML = "￥" + $(this).attr("count");
			$("#p-nameid-2").css("position", "absolute");
			$("#p-nameid-2").css("left", X);
			$("#p-nameid-2").css("top", Y);
			$("#p-nameid-2").show();
		});
		$('.bar').mouseleave(function(){
			$("#p-nameid-2").hide();
		});
  
  
  });
  

  
  
 

  function type(d) {
    d.frequency = +d.frequency;
    return d;
  }
}

function drawLines(dataStr, pos, colors) {
  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 474 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

  var parseDate = d3.time.format("%d-%b-%y").parse;

  var x = d3.time.scale()
      .range([0, width]);

  var y = d3.scale.linear()
      .range([height, 0]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(function(d) { return d/10000+"w"; });

  var line = d3.svg.line()
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.close); });

  var svg = d3.select(pos).append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  d3.tsv(dataStr, function(error, data) {
      data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
      });

      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain(d3.extent(data, function(d) { return d.close; }));

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
      
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Price ($)");

      svg.append("path")
          .datum(data)
          .attr("class", "line " + colors)
          .attr("d", line);
  });
}

function drawLinesBrushTotalPrice (dataStr, pos, colors, w, h) {
	//alert(w);
    var margin = {top: 20, right: 10, bottom: 80, left: 0},
        margin2 = {top: 240, right: 10, bottom: 30, left: 0},
        width = w - margin.left - margin.right,
        height = h - margin.top - margin.bottom,
        height2 = h - margin2.top - margin2.bottom;

    var parseDate = d3.time.format("%Y-%m-%d").parse;

    var x = d3.time.scale().range([0, width]),
        x2 = d3.time.scale().range([0, width]);

    var y = d3.scale.linear().range([height, 0]),
        y2 = d3.scale.linear().range([height2, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom"),
        xAxis2 = d3.svg.axis().scale(x2).orient("bottom");

    var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(function(d) { return d/10000+"w"; });

    var brush = d3.svg.brush().x(x2).on("brush", brushed);
   
    var line = d3.svg.line()
        .x(function(d) { return x(d.orderTime); })
        .y(function(d) { return y(d.totalPrice); });

    var line2 = d3.svg.line()
        .x(function(d) { return x2(d.orderTime); })
        .y(function(d) { return y2(d.totalPrice);});

    var svg = d3.select(pos).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .attr("margin", "50px");
    
    svg.append("defs").append("clipPath")
		  .attr("id", "clipaa")
		.append("rect")
		  .attr("width", width)
		  .attr("height", height);

    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var context = svg.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

    d3.tsv(dataStr, function(error, data) {
        data.forEach(function(d) {
          d.orderTime = parseDate(d.orderTime);
          d.totalPrice = +d.totalPrice;
          
        });
        
        if ( data.length == 0 )  {
      	  d3.select("#chart-1")
    		.append("p")
    			.attr("id", "nodata1")
    			.style({"position":"absolute", "top":"50%", "left": "40%","font-size":"25px", "font-weight":"bold"})
    			.html("对不起，暂无数据！");
    		  return; 
        }

        x.domain(d3.extent(data, function(d) { return d.orderTime; }));
        y.domain(d3.extent(data, function(d) { return d.totalPrice; }));
        x2.domain (x.domain());
        y2.domain (y.domain());

        focus.append("path")
        .datum(data)
        .attr("class", "line " + colors)
        .attr("d", line);

        focus.append ("g") 
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

        focus.append("g")
            .attr("class", "y axis")
            .call(yAxis);

        
         context.append("path")
            .datum(data)
            .attr("class", "line " + colors)
            .attr("d", line2);

        context.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height2 + ")")
            .call(xAxis2);

        context.append("g")
            .attr("class", "x brush")
            .call(brush)
          .selectAll("rect")
            .attr("y", -6)
            .attr("height", height2 + 7);
    });

    function brushed() {
      x.domain(brush.empty() ? x2.domain() : brush.extent());
      focus.select(".line").attr("d", line);
      focus.select(".x.axis").call(xAxis);
    }

}
function drawLinesBrushCount (dataStr, pos, colors, w, h) {

    var margin = {top: 20, right: 10, bottom: 100, left: 0},
        margin2 = {top: 230, right: 10, bottom: 30, left: 0},
        width = w - margin.left - margin.right,
        height = h - margin.top - margin.bottom,
        height2 = h - margin2.top - margin2.bottom;

    var parseDate = d3.time.format("%Y-%m-%d").parse;

    var x = d3.time.scale().range([0, width]),
        x2 = d3.time.scale().range([0, width]);

    var y = d3.scale.linear().range([height, 0]),
        y2 = d3.scale.linear().range([height2, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom"),
        xAxis2 = d3.svg.axis().scale(x2).orient("bottom");

    var yAxis = d3.svg.axis().scale(y).orient("right");

    var brush = d3.svg.brush().x(x2).on("brush", brushed);
  
    var line = d3.svg.line()
        .x(function(d) { return x(d.orderTime); })
        .y(function(d) { return y(d.count); });

    var line2 = d3.svg.line()
        .x(function(d) { return x2(d.orderTime); })
        .y(function(d) { return y2(d.count);});

    var svg = d3.select(pos).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var context = svg.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

    d3.tsv(dataStr, function(error, data) {
        data.forEach(function(d) {
          d.orderTime = parseDate(d.orderTime);
          d.count = +d.count;
        });
        if ( data.length == 0 )  {
        	  d3.select("#chart-1")
      		.append("p")
      			.attr("id", "nodata1")
      			.style({"position":"absolute", "top":"50%", "left": "40%","font-size":"25px", "font-weight":"bold"})
      			.html("对不起，暂无数据！");
      		  return; 
          }

        x.domain(d3.extent(data, function(d) { return d.orderTime; }));
        y.domain(d3.extent(data, function(d) { return d.count; }));
        x2.domain (x.domain());
        y2.domain (y.domain());


        focus.append ("g") 
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

        focus.append("g")
            .attr("class", "y axis")
            .call(yAxis);

        focus.append("path")
            .datum(data)
            .attr("class", "line " + colors)
            .attr("d", line);

         context.append("path")
            .datum(data)
            .attr("class", "line " + colors)
            .attr("d", line2);

        context.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height2 + ")")
            .call(xAxis2);

        context.append("g")
            .attr("class", "x brush")
            .call(brush)
          .selectAll("rect")
            .attr("y", -6)
            .attr("height", height2 + 7);
    });

    function brushed() {
      x.domain(brush.empty() ? x2.domain() : brush.extent());
      focus.select(".line").attr("d", line);
      focus.select(".x.axis").call(xAxis);
    }

}
function drawLinesBrushAvgPrice (dataStr, pos, colors, w, h) {

    var margin = {top: 20, right: 10, bottom: 100, left: 0},
        margin2 = {top: 230, right: 10, bottom: 30, left: 0},
        width = w - margin.left - margin.right,
        height = h - margin.top - margin.bottom,
        height2 = h - margin2.top - margin2.bottom;

    var parseDate = d3.time.format("%Y-%m-%d").parse;

    var x = d3.time.scale().range([0, width]),
        x2 = d3.time.scale().range([0, width]);

    var y = d3.scale.linear().range([height, 0]),
        y2 = d3.scale.linear().range([height2, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom"),
        xAxis2 = d3.svg.axis().scale(x2).orient("bottom");

    var yAxis = d3.svg.axis().scale(y).orient("right");

    var brush = d3.svg.brush().x(x2).on("brush", brushed);
    
    var line = d3.svg.line()
        .x(function(d) { return x(d.orderTime); })
        .y(function(d) { return y(d.avgPrice); });

    var line2 = d3.svg.line()
        .x(function(d) { return x2(d.orderTime); })
        .y(function(d) { return y2(d.avgPrice);});

    var svg = d3.select(pos).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var context = svg.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

    d3.tsv(dataStr, function(error, data) {
        data.forEach(function(d) {
          d.orderTime = parseDate(d.orderTime);
          d.avgPrice = +d.avgPrice;
        });
        if ( data.length == 0 )  {
        	  d3.select("#chart-1")
      		.append("p")
      			.attr("id", "nodata1")
      			.style({"position":"absolute", "top":"50%", "left": "40%","font-size":"25px", "font-weight":"bold"})
      			.html("对不起，暂无数据！");
      		  return; 
          }

        x.domain(d3.extent(data, function(d) { return d.orderTime; }));
        y.domain(d3.extent(data, function(d) { return d.avgPrice; }));
        x2.domain (x.domain());
        y2.domain (y.domain());


        focus.append ("g") 
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

        focus.append("g")
            .attr("class", "y axis")
            .call(yAxis);

        focus.append("path")
            .datum(data)
            .attr("class", "line " + colors)
            .attr("d", line);

        context.append("path")
            .datum(data)
            .attr("class", "line " + colors)
            .attr("d", line2);
        
        /*
         context.append("path")
          	 .datum(data)
          	 .attr("class", "area")
          	 .attr("class", area);
         */

        context.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height2 + ")")
            .call(xAxis2);

        context.append("g")
            .attr("class", "x brush")
            .call(brush)
          .selectAll("rect")
            .attr("y", -6)
            .attr("height", height2 + 7);
    });

    function brushed() {
      x.domain(brush.empty() ? x2.domain() : brush.extent());
      focus.select(".line").attr("d", line);
      focus.select(".x.axis").call(xAxis);
    }

}

function drawPies (dataStr, pos, w) {
	var width = w,
    height = 650,
    radius = ( Math.min(width, height) -20 )/ 2;

	var x = d3.scale.linear()
	    .range([0, 2 * Math.PI]);
	
	var y = d3.scale.sqrt()
	    .range([0, radius]);
	
	var color = d3.scale.category20c();
	
	var svg = d3.select(pos).append("svg")
	    .attr("width", width)
	    .attr("height", height)
	  .append("g")
	    .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
	
	var partition = d3.layout.partition()
	    .sort(null)
	    .value(function(d) { return d.size; });
	
	var arc = d3.svg.arc()
	    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
	    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
	    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
	    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
	
	// Keep track of the node that is currently being displayed as the root.
	var node;
	
	d3.json(dataStr, function(error, root) {
	  node = root;
	  
	  if ( root.children.length == 0 ) {
		  d3.select("#chart-3")
		.append("span")
			.attr("id", "nodata3")
			.style({"position":"relative", "top":"-400px", "left": "40%","font-size":"25px", "font-weight":"bold"})
			.html("对不起，暂无数据！");
		  return;
	  }
	  
	 /* $.each(node, function(d, i) {
          if(d.children==null){
        	  var parent = d.parent;
        	  while (parent!=null)
        	  {
        		  parent.size+=d.size;
        		  parent = d.parent;
        		  alert(parent.size);
        	  }
          }
      });*/
	  
	  var path = svg.datum(root).selectAll("path")
	      .data(partition.nodes)
	    .enter().append("path")
	      .attr("d", arc)
	      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
	      .on("click", click)
	      .each(stash)
		  .attr("count",function(d){return d.size})
	      .attr("id",function(d){
	    	  if ( d.size )	return d.name+"    ￥" +d.size;
	    	  else return d.name;
	       });
	  
	  /*$(document).mousemove(function(e){
	    	$("#p-nameid").text(e.pageX + ", " + e.pageY);
	    	//$("#p-nameid").show();
	    });*/
		$('#chart-3 path').mousemove(function(e){
			//$("#p-nameid").text(e.pageX + ", " + e.pageY);
			var Y = e.pageY-40+10;
			var X = e.pageX-$(".content").width()*0.1+50;
			document.getElementById("p-nameid").innerHTML = this.id;
			$("#p-nameid").css("position", "absolute");
			$("#p-nameid").css("left", X);
			$("#p-nameid").css("top", Y);
			$("#p-nameid").show();
			//alert(e.pageY);
		});
		$('#chart-3 path').mouseleave(function(){
			$("#p-nameid").hide();
		});

	
	  d3.selectAll("input").on("change", function change() {
	    var value = this.value === "size"
	        ? function(d) { return d.size; }
	        : function() { return 1; };
	
	    path
	        .data(partition.value(value).nodes)
	      .transition()
	        .duration(1000)
	        .attrTween("d", arcTweenData);
	  });
	
	  function click(d) {
	    node = d;
	    path.transition()
	      .duration(1000)
	      .attrTween("d", arcTweenZoom(d));
	  }
	});
	
	d3.select(self.frameElement).style("height", height + "px");
	
	// Setup for switching data: stash the old values for transition.
	function stash(d) {
	  d.x0 = d.x;
	  d.dx0 = d.dx;
	}
	
	// When switching data: interpolate the arcs in data space.
	function arcTweenData(a, i) {
	  var oi = d3.interpolate({x: a.x0, dx: a.dx0}, a);
	  function tween(t) {
	    var b = oi(t);
	    a.x0 = b.x;
	    a.dx0 = b.dx;
	    return arc(b);
	  }
	  if (i == 0) {
	   // If we are on the first arc, adjust the x domain to match the root node
	   // at the current zoom level. (We only need to do this once.)
	    var xd = d3.interpolate(x.domain(), [node.x, node.x + node.dx]);
	    return function(t) {
	      x.domain(xd(t));
	      return tween(t);
	    };
	  } else {
	    return tween;
	  }
	}
	
	// When zooming: interpolate the scales.
	function arcTweenZoom(d) {
	  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
	      yd = d3.interpolate(y.domain(), [d.y, 1]),
	      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
	  return function(d, i) {
	    return i
	        ? function(t) { return arc(d); }
	        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
	  };
	}
}

